<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:37:29
 * @LastEditTime: 2022-01-02 18:53:02
 * @FilePath: \recipes-admin-system\src\views\recipes\Recipes.vue
-->
<template>
  <div class="recipes-container">
    <bread-crumb></bread-crumb>

    <div class="search-area">
      <el-input type="text" v-model="searchValue"> </el-input>
      <el-button type="primary" @click="searchSwiper">搜索</el-button>

      <!-- <el-button type="primary" @click="addDialogVisible = true">
        <i class="el-icon-circle-plus-outline"></i> 添加
      </el-button> -->
    </div>

    <el-dialog
      width="500px"
      :append-to-body="true"
      title="修改菜品"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form :model="singleMenuItem">
        <el-form-item label="菜品名字" :label-width="formLabelWidth">
          <el-input
            v-model="singleMenuItem.name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="是否免费观看" :label-width="formLabelWidth">
          <div class="isFree" style="width: 300px">
            <el-radio v-model="singleMenuItem.isFree" label="Y">是</el-radio>
            <el-radio v-model="singleMenuItem.isFree" label="N">否</el-radio>
          </div>
        </el-form-item>

        <el-form-item label="是否是热点商品" :label-width="formLabelWidth">
          <div class="isHot" style="width: 300px">
            <el-radio v-model="singleMenuItem.isHot" label="Y">是</el-radio>
            <el-radio v-model="singleMenuItem.isHot" label="N">否</el-radio>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <!-- <el-button v-if="addDialogVisible" type="primary" @click="addSwiper"
          >确 定</el-button
        > -->
        <el-button type="primary" @click="updateMenu">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="menuItemsByPage"
      border
      style="width: 100%"
      :header-cell-style="rowClass"
      :cell-style="rowClass"
      :stripe="true"
      :highlight-current-row="true"
    >
      <el-table-column label="'菜谱编号">
        <template slot-scope="scope">
          <span>{{ scope.row._id.substr(-5) }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称"> </el-table-column>

      <el-table-column label="缩略图">
        <template slot-scope="scope">
          <img :src="scope.row.coverpic" alt="" />
        </template>
      </el-table-column>

      <el-table-column prop="pageview" label="浏览量"> </el-table-column>

      <el-table-column label="收藏量">
        <template slot-scope="scope">
          <span>{{ scope.row.collections * -1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否免费">
        <template slot-scope="scope">
          <span>{{ scope.row.isFree | nameFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否热点">
        <template slot-scope="scope">
          <span>{{ scope.row.isHot | nameFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="原料">
        <template slot-scope="scope">
          <ingredients :ingredient="scope.row.ingredient"></ingredients>
        </template>
      </el-table-column>

      <el-table-column label="步骤">
        <template slot-scope="scope">
          <steps :method="scope.row.method"></steps>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)">
            <i class="el-icon-edit"></i> 修改</el-button
          >
          <!-- v-auth -->
        </template>
      </el-table-column>
    </el-table>

    <pages
      :total="total"
      :currentPage="pageData.currentPage"
      :pageSize="pageData.pageSize"
      @prevPage="prevPage"
      @nextPage="nextPage"
    />
  </div>
</template>

<script>
import Pages from '../../components/common/Pages.vue';
import BreadCrumb from '../../components/common/BreadCrumb.vue';
import Ingredients from '../../components/menu/Ingredients.vue';
import Steps from '../../components/menu/Steps.vue';

import bus from '@/utils/bus.js';
import pageMixin from '@/mixins/pageMixin';

import { createNamespacedHelpers } from 'vuex';
const {
  mapActions: recipesActions,
  mapState: recipesState,
  mapMutations: recipesMutations,
  mapGetters: recipesGetters,
} = createNamespacedHelpers('recipes');

export default {
  mixins: [pageMixin],
  components: {
    pages: Pages,
    'bread-crumb': BreadCrumb,
    ingredients: Ingredients,
    steps: Steps,
  },
  data() {
    return {
      showIngredientTemp: false,
      editDialogVisible: false,
      singleMenuItem: {},
      formLabelWidth: '120px',
      searchValue: '',
    };
  },
  computed: {
    ...recipesState(['menuItems', 'total', 'pages']),
    ...recipesGetters(['menuItemsByPage']),
    dialogVisible: {
      get() {
        return this.addDialogVisible || this.editDialogVisible;
      },
      set(val) {
        this.addDialogVisible = val;
        this.editDialogVisible = val;
      },
    },
  },
  created() {
    this.findAllMenu();

    bus.$on('handleSizeChange', (size) => {
      this.pageData.pageSize = size;
      this.findAllMenu();
    });

    bus.$on('handleCurrentChange', (currentPage) => {
      this.pageData.currentPage = currentPage;
      this.findAllMenu();
    });
  },
  methods: {
    ...recipesActions(['findAllMenuAsync', 'getMenuDetailAsync']),
    ...recipesMutations(['SET_PAGESIZE', 'SET_CURRENT']),

    async findAllMenu(searchValue) {
      this.findAllMenuAsync(searchValue);
      this.SET_PAGESIZE(this.pageData.pageSize);
      this.SET_CURRENT(this.pageData.currentPage);
      //   console.log(this.$store.state);
      //   console.log(this.admins);
    },

    showIngredient() {
      this.showIngredientTemp = true;
    },

    rowClass() {
      return 'text-align:center';
    },

    async updateMenu() {
      this.editDialogVisible = false;
      //   console.log(this.singleMenuItem);

      const { data: res } = await this.$api.recipes.updateMenu(
        this.singleMenuItem
      );

      //   console.log(res);

      if (res.meta.status === 200) {
        this.$notify({
          title: '成功',
          message: res.meta.msg,
          type: 'success',
        });
        // this.$message({
        //   message: res.meta.msg,
        //   type: 'success',
        // });
        this.findAllMenu();
      }
    },

    searchSwiper() {
      this.findAllMenu(this.searchValue);
    },

    closeDialog() {
      this.showIngredients = false;
      this.editDialogVisible = false;
      this.singleMenuItem = {};
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.singleMenuItem = {};
          done();
        })
        .catch((_) => {});
    },

    async handleEdit(id) {
      this.editDialogVisible = true;
      let res = await this.getMenuDetailAsync(id);
      this.singleMenuItem = res;
      //   console.log(res);
    },
  },
  watch: {
    pageData: {
      handler(val) {
        this.findAllMenu();
      },
      deep: true,
    },

    'pageData.pageSize'() {
      this.pageData.currentPage = 1;
      this.findAllMenu();
    },

    searchValue(val) {
      if (!val) {
        this.findAllMenu(val);
      }
    },
  },
};
</script>

<style scoped lang="scss">
// @import '@/assets/sass/common.scss';

a {
  text-decoration: none;
  color: rgb(124, 124, 124);
}

.recipes-container {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  table {
    margin: 20px 0;
    width: 100%;
    text-align: center;
    border: 1px solid #ccc;
    border-collapse: collapse;
    tr td,
    th {
      height: 50px;
      border: 1px solid #ccc;
      img {
        width: 50px;
        height: 50px;
        border-radius: $vue-border-radius-base;
      }
    }
  }
}

.search-area {
  margin-bottom: 30px;
  height: 30px;
  .el-input {
    width: 200px;
    height: 30px;
    margin-right: 10px;
  }
}

.el-input {
  width: 90%;
}

::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  span {
    margin-left: 40px;
  }
}

::v-deep .el-upload {
  img {
    width: 148px;
    height: 148px;
    border-radius: 6px;
  }
}

::v-deep .el-radio {
  width: 100px;
  margin-right: 15px;
}

::v-deep .el-form-item__content span {
  margin-left: 20px;
}
</style>
